<template>
  <div class="container">
    <!-- 题目预览 -->
    <el-row :gutter="20">
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【题型】:{{ datalist.questionType | reverse }}
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【编号】:{{ datalist.id }}
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【难度】: {{ datalist.difficulty }}
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【标签】:{{ datalist.tags }}
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【学科】:{{ datalist.subjectName }}
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【目录】:{{ datalist.directoryName }}
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【方向】:{{ datalist.direction }}
        </div></el-col
      >
    </el-row>
    <!-- 题干 -->
    <hr />
    <el-row>
      <div>【题干】:</div>
      <div style="color: blue"><div v-html="datalist.question"></div></div>
    </el-row>
    <!-- 简答的框 -->
    <el-row v-show="datalist.questionType != 3">
      <div>
        {{ datalist.questionType | reverse }}
        题选项：（以下选中的选项为正确答案）
      </div>
    </el-row>
    <!-- 单选的框 -->
    <div
      v-for="item in datalist.options"
      :key="item.id"
      v-show="datalist.questionType == 1"
    >
      <el-radio :value="Lists" :label="item.isRight"
        >{{ item.code }}:{{ item.title }}</el-radio
      >
    </div>
    <!--多选的框 -->
    <el-checkbox-group :value="List" v-show="datalist.questionType == 2">
      <div v-for="item in datalist.options" :key="item.id">
        <el-checkbox :label="item.isRight" name="type"
          >{{ item.code }}:{{ item.title }}</el-checkbox
        >
      </div>
    </el-checkbox-group>

    <!-- 参考答案 -->
    <hr />
    <el-row>
      <div>
        【参考答案】:
        <el-button type="danger" size="small" @click="showView">
          视频答案预览
        </el-button>
      </div></el-row
    >
    <el-row v-if="showVideo">
      <el-col :span="12"
        ><div class="grid-content bg-purple-dark test_two_box">
          <video
            :src="datalist.videoURL"
            controls="controls"
            height="200"
            width="400"
            ref="videoOff"
            autoplay
          ></video></div
      ></el-col>
    </el-row>
    <!-- 答案解析 -->
    <hr />
    <el-row>
      <div>
        【答案解析】:
        <div v-html="datalist.answer"></div></div
    ></el-row>
    <!-- 题目备注 -->
    <hr />
    <el-row>
      <div>【题目备注】: {{ datalist.remarks }}</div></el-row
    >
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions.js'
export default {
  props: {
    obj: {
      type: Object
    }
  },
  data () {
    return {
      datalist: [], // 保存渲染数据
      showVideo: false, // 视频弹窗
      type: [1],
      radio: 1
    }
  },
  created () {
    this.getList()
  },
  methods: {
    async getList () {
      const res = await detail(this.obj)
      console.log('res----------------->', res.data)
      this.datalist = res.data
    },
    // 弹窗显示
    showView () {
      this.showVideo = !this.showVideo
    }
  },
  // 监听id变化
  watch: {
    obj: {
      handler: function () {
        this.getList()
        this.showVideo = false
      },
      immediate: true // 是否立即执行
    }
  },
  computed: {
    List () {
      return this.type
    },
    Lists () {
      return this.radio
    }
  },
  // 过滤器配置选择对应文字
  filters: {
    reverse: function (val) {
      const ques = {
        1: '单选',
        2: '多选',
        3: '简答'
      }
      return ques[val]
    },
    difficuinfo: function (val) {
      const difficu = {
        1: '简单',
        2: '一般',
        3: '困难'
      }
      return difficu[val]
    }
  }
}
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
